<?xml version="1.0" encoding="UTF-8"?>
<ui:composition
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	template="/WEB-INF/templates/public/default.xhtml"
>
    
    <f:metadata>
    	<f:viewParam name="bulletinId" value="#{bulletinHome3.id}" required="true"></f:viewParam>
    </f:metadata>

	<ui:define name="head">
		<style type="text/css">
			.slotMachineSize{
				font-size: 20px;
			}
		
		</style>
		<h:outputStylesheet name="css/public/jingjiajiemian.css"></h:outputStylesheet>		
    	<h:outputStylesheet name="css/public/jquery.slotmachine.css"></h:outputStylesheet>
    	<h:outputScript name="js/public/jquery.slotmachine.min.js"></h:outputScript>
    	<h:outputScript name="js/bignumber.js"></h:outputScript>
    	<script type="text/javascript">
    		var websocket; 
    		var machine;
    		var machine1;
    		var machine2;
    		var machine3;
    		var machine4;
    		var machine5;
    		var hasRunned = false;
    		var hasInOnMessage = false;
    		var candidateTradeCount = #{bulletinHome3.instance.candidateTradeCount};
    		var startChooseCountdownFun ;
    		var timeDiff;//客户端与服务端的时间差
        	var leftTimer;//倒计时timer
			$(function () {
				var showStartBtn = $("#showStartBtn").text();
				if(showStartBtn == 'true'){
						$(".startBtn").css("display","block");
					}
	    		var nowStr = $(".currSysTime").val();
	    		var longTime = parseInt(nowStr);
	    	
	 	    	//var currTimestamp = Date.parse(nowStr.replace(/-/g,"/"));
	 	    	//var now = new Date(longTime);
	 	   	
	 	    	//now.setTime(currTimestamp);
	 	    	var localNow = new Date();
	 	    	
	 	    	timeDiff = localNow.getTime() - longTime;
				createWs();
				
				<c:if test="#{bulletinHome3.instance.over &amp;&amp; false}">
					<c:if test="#{bulletinHome3.instance.wayOfChoose.name() == 'Random' or bulletinHome3.instance.wayOfChoose.name() == 'Manual'  or bulletinHome3.instance.wayOfChoose.name() == 'Price' or bulletinHome3.instance.wayOfChoose.name() == 'Average'}">
						$(".chooseOption").each(function () {
							if ($(this).attr("supplierId") != '#{bulletinHome3.instance.successTrade.supplier.id}') {
								$(this).css("display", "none");
							}
						});
					</c:if>
					<c:if test="#{bulletinHome3.instance.wayOfChoose.name() == 'Best'}">
						$("#textMachine1 &gt; .chooseOption").each(function () {
							if ($(this).attr("supplierId") != '#{bulletinHome3.instance.bestTrades[0].supplier.id}') {
								$(this).css("display", "none");
							}
						});

						$("#textMachine2 &gt; .chooseOption").each(function () {
							if ($(this).attr("supplierId") != '#{bulletinHome3.instance.bestTrades[1].supplier.id}') {
								$(this).css("display", "none");
							}
						});

						$("#textMachine3 &gt; .chooseOption").each(function () {
							if ($(this).attr("supplierId") != '#{bulletinHome3.instance.bestTrades[2].supplier.id}') {
								$(this).css("display", "none");
							}
						});
						$("#textMachine4 &gt; .chooseOption").each(function () {
							if ($(this).attr("supplierId") != '#{bulletinHome3.instance.bestTrades[3].supplier.id}') {
								$(this).css("display", "none");
							}
						});
						$("#textMachine5 &gt; .chooseOption").each(function () {
							if ($(this).attr("supplierId") != '#{bulletinHome3.instance.bestTrades[4].supplier.id}') {
								$(this).css("display", "none");
							}
						});
					</c:if>
				</c:if>		
				var done = false;
				//向服务器请求
				window.setInterval(function() {
					createWs();
				}, 30000);
				
				leftTimer = window.setInterval(function() {
					refreshLeftTime();		
					
				}, 1000);
				
			});
    		//var closeReCreateTimer;
    		function sendMsg(){
    			websocket.send("#{bulletinHome3.id}");				
        	}
        	
    		function createWs() {
        		if(hasRunned) return false;
    			var stringTime = $('#chooseTime').text();
		    	var timestamp2 = Date.parse(stringTime.replace(/-/g,"/"));
				var chooseTime = new Date();
		    	chooseTime.setTime(timestamp2);
				
		    	var now = new Date();
		    	var dateDiff = now.getTime() - chooseTime.getTime() - timeDiff;
		    	
		    	if (dateDiff &gt; 0)
			    	return false;

		    	dateDiff = dateDiff * -1;
		    	//如果选取时间小于30秒不再发送websocket
		    	console.log(dateDiff);
				
    			if (typeof(WebSocket) !== "undefined") {
					var host = window.location.host;
					var wsUri = "ws://" + host + "#{request.getContextPath()}/bulletinEnd/#{bulletinHome3.id}";
					websocket = new WebSocket(wsUri);
			    	
					websocket.onopen = function () {
						console.info('opened');
						onHideErrorMsg();
					};
					websocket.onclose = function () {
						console.info('closed');
						//closeReCreateTimer = window.setTimeout(function() {
							//console.log("closed reconnect");
			            	//createWs();		
						//}, 1000);
					};
			        websocket.onerror = function(evt) { 
			            onError(evt);
			            //if(dateDiff/1000 &lt; 30) return false;
			           window.setTimeout(function() {
			            	console.log("error reconnect");
			            	createWs();		
						}, 1000);
			        }; 
					websocket.onmessage = function (evt) {
						if(hasInOnMessage) return false;
						console.info(evt.data);
						if (evt.data == 'pong') {
							return false;
						}
						if (evt.data == 'bid') {
							return false;
						}
						hasRunned = true;
						hasInOnMessage = true;
						if(evt.data == 'endChoose'){
							if ($('#chooseType').val() == 'Random' || $('#chooseType').val() == 'Manual') {
								window.clearInterval(startChooseCountdownFun);
								startChooseCountdown(0);
								machine.stop();
							}else{
								machine1.stop();
								setTimeout(function() {
									machine2.stop();
								}, 3000);
								setTimeout(function() {
									machine3.stop();
								}, 6000);
								window.clearInterval(startChooseCountdownFun);
								startChooseCountdown(6000);
							}
							return false;
						}else if(evt.data == 'startChoose'){
							$(".emptyChooseList").css("display","none");
							$(".filledChooseList").css("display","inline-block");
							clearLeftTimer();
						}else{
							console.log(evt.data);
							if ($('#chooseType').val() == 'Random' || $('#chooseType').val() == 'Manual' || $('#chooseType').val() == 'Price' || $('#chooseType').val() == 'Average') {
								$("#offerPriceForm").hide();
								$(".emptyChooseList").css("display","none");
								$(".filledChooseList").css("display","inline-block");
								machine = $("#textMachine").slotMachine({
									active	: 1,
									delay	: 900,
									auto	: false,
									randomize: function(){
										return $("div[supplierId = '" + evt.data + "']").attr("active");
									}
								});
								machine.shuffle();
								var allChooseTime = 10*1000;
								if ( $('#chooseType').val() == 'Price' || $('#chooseType').val() == 'Average' ) {
									allChooseTime = 0;
								}
								startChooseCountdown(allChooseTime);
								$(".stopBtn").css("display","block");
								setTimeout(function() {
									machine.stop();
								}, allChooseTime);
							} else if ($('#chooseType').val() == 'Best') {
								var supplierArray = evt.data.split(",");
								$(".emptyChooseList").css("display","none");
								$(".filledChooseList").css("display","inline-block");
								machine1 = $("#textMachine1").slotMachine({
									active	: 1,
									delay	: 900,
									auto	: false,
									randomize: function(){
										var result = $("#textMachine1").find("div[supplierid = '" + supplierArray[0] + "']").attr("active");
										//console.info(result);
										return result;
									}
								});
								var allChooseTime = 5*1000;
								//var timeSpan = $("#textMachine1").attr("timeSpan");
								//if(timeSpan == 'Long') allChooseTime = 20*1000;
								//else if(timeSpan == 'Middle')allChooseTime = 10*1000;
								$(".stopBtn").css("display","block");
								machine1.shuffle();
								setTimeout(function() {
									machine1.stop();
								}, allChooseTime);
								if(candidateTradeCount >1){
									machine2 = $("#textMachine2").slotMachine({
										active	: 1,
										delay	: 900,
										auto	: false,
										randomize: function(){									
											if ($('#bestTradesCount').val() &lt; 2) 
												return -1;
											var result = $("#textMachine2").find("div[supplierid = '" + supplierArray[1] + "']").attr("active");
											//console.info(result);
											return result;
										}
									});
									machine2.shuffle();
									setTimeout(function() {
										machine2.stop();
									}, allChooseTime + 5000);		
								}
								if(candidateTradeCount >2){
									machine3 = $("#textMachine3").slotMachine({
										active	: 1,
										delay	: 900,
										auto	: false,
										randomize: function(){									
											if ($('#bestTradesCount').val() &lt; 3) 
												return -1;
											var result = $("#textMachine3").find("div[supplierid = '" + supplierArray[2] + "']").attr("active");
											//console.info(result);
											return result;
										}
									});
									machine3.shuffle();
									setTimeout(function() {
										machine3.stop();
									}, allChooseTime + 10000);		
								}
													
								if(candidateTradeCount >3){
									machine4 = $("#textMachine4").slotMachine({
										active	: 1,
										delay	: 900,
										auto	: false,
										randomize: function(){									
											if ($('#bestTradesCount').val() &lt; 4) 
												return -1;
											var result = $("#textMachine4").find("div[supplierid = '" + supplierArray[3] + "']").attr("active");
											//console.info(result);
											return result;
										}
									});
									machine4.shuffle();
									setTimeout(function() {
										machine4.stop();
									}, allChooseTime + 12000);		
								}

								if(candidateTradeCount >4){
									machine5 = $("#textMachine5").slotMachine({
										active	: 1,
										delay	: 900,
										auto	: false,
										randomize: function(){									
											if ($('#bestTradesCount').val() &lt; 5) 
												return -1;
											var result = $("#textMachine5").find("div[supplierid = '" + supplierArray[4] + "']").attr("active");
											//console.info(result);
											return result;
										}
									});
									machine5.shuffle();
									setTimeout(function() {
										machine5.stop();
									}, allChooseTime + 14000);		
								}
								
								//startChooseCountdown(allChooseTime + 10000);					
							}
						}
							
					};					
				} else {
					alert("您的浏览器不支持Websocket，请更换浏览器，推荐使用Chrome、Firefox、IE11.0及以上版本。");
				}
        	}

    		

			function clearLeftTimer(){
				window.clearInterval(leftTimer);
				$("#leftDays").text(0);
		        $("#leftHours").text(0);
		        $("#leftMinutes").text(0);
		        $("#leftSeconds").text(0);  
		        
			} 
		    function onError(evt) { 
		        $('#websocketError').css("display", "block");
		    }  

		    function onHideErrorMsg() { 
		        $('#websocketError').css("display", "none");
		    }  
			
		    function startChooseCountdown(millis) {
		    	window.clearInterval(startChooseCountdownFun);
			    if (millis &lt;= 0) {
			    	$('#chooseCountdown').text("恭喜中选");
			    	return false;
				}
			   
				$('#chooseCountdown').text(millis / 1000);
				startChooseCountdownFun = setTimeout(function() {
					startChooseCountdown(millis - 1000)
				}, 1000);
				
			}
		   
		    function refreshLeftTime() {
		    	// 获取某个时间格式的时间戳
		    	var stringTime = $('#chooseTime').text();
		    	var timestamp2 = Date.parse(stringTime.replace(/-/g,"/"));
		    	var chooseTime = new Date();
		    	chooseTime.setTime(timestamp2);
				
		    	var now = new Date();
		    	var dateDiff = now.getTime() - chooseTime.getTime() - timeDiff;
		    	if (dateDiff &gt; 1000)
			    	return false;
		    	if (dateDiff > 0) 
		    		dateDiff = 0;
		    	dateDiff = dateDiff * -1;
		    	//计算出相差天数  
		        var days = Math.floor(dateDiff / (24 * 3600 * 1000));
				$("#leftDays").text(days);
				
		      	//计算出小时数  
		        var leave1 = dateDiff % (24 * 3600 * 1000);    //计算天数后剩余的毫秒数  
		        var hours = Math.floor(leave1 / (3600 * 1000));
		        $("#leftHours").text(hours);  

		      	//计算相差分钟数  
		        var leave2 = leave1 % (3600 * 1000);        //计算小时数后剩余的毫秒数  
		        var minutes = Math.floor(leave2 / (60 * 1000));
		        $("#leftMinutes").text(minutes);  

		      	//计算相差秒数  
		        var leave3 = leave2 % (60 * 1000);      //计算分钟数后剩余的毫秒数  
		        var seconds = Math.floor(leave3 / 1000);
		        $("#leftSeconds").text(seconds);  
			}
			
			
    	</script>
	</ui:define>

	<ui:define name="content">
		<div id="jingjiamask"> 
			<div style="clear: both"/>
		</div>
		   	
   		<input id="chooseType" type="hidden" value="#{bulletinHome3.instance.wayOfChoose.name()}" />
   		<input id="bestTradesCount" type="hidden" value="#{bulletinHome3.instance.verifiedTrades.size()}" />
   		
		<div id="itemslogin"> 
			<!--左-->
			<div class="bidding_left mr15">
				<h2>项目信息</h2>
				<div class="bidding_left_c">
					<h4>项目名称：</h4>
					<p>#{bulletinHome3.instance.projectName}</p>
					<h4>项目编号：</h4>
					<p>#{bulletinHome3.instance.serialNumber}</p>
					<h4>项目申请人：</h4>
					<p>#{bulletinHome3.instance.buyer.cnname}</p>
					<p:outputLabel rendered="#{bulletinHome3.instance.wayOfChoose.name() == 'Price' or bulletinHome3.instance.wayOfChoose.name() == 'Average'}">
						<h4>最高限价（元）：</h4>
						<p>#{bulletinHome3.instance.industryStandard}</p>
					</p:outputLabel>
					<h4>选取时间</h4>
					<p>
						<h:outputText id="chooseTime" value="#{bulletinHome3.instance.chooseTime}" >
							<f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss"/>
						</h:outputText>
						
						<h:outputText value="#{bulletinHome3.instance.isShowStartBtn()}" id="showStartBtn" style="display:none" >
						</h:outputText>
					</p>
					<h4>项目基本情况：</h4>
					<p>#{bulletinHome3.instance.projectInfo}</p>
				</div>
			</div>
			<!--中--> 
			<div class="bidding_center">
				<p:outputPanel id="timeLeftPanel">
					<h:panelGroup rendered="#{not bulletinHome3.instance.alreadyApplyOver()}"  >
						<h2>剩余时间#{' '}#{' '}#{' '} 
						<span class="red">
							<span id="leftDays"></span>天
							<span id="leftHours"></span>时
							<span id="leftMinutes"></span>分
							<span id="leftSeconds"></span>秒
						</span></h2>
					</h:panelGroup>
					<h:panelGroup rendered="#{bulletinHome3.instance.alreadyApplyOver()}" >
						<h2>选取结束#{' '}#{' '}#{' '}</h2>
					</h:panelGroup>
				</p:outputPanel>
				
				<div class="bidding_center_c">
					
					<h3>选取方式：#{bulletinHome3.instance.wayOfChoose.typeName}</h3>
					
					<h2 id="websocketError" style="color: red; font-weight: bold; display: none;">您的网络连接已经断开，如果需要继续观察选取结果请刷新。</h2>
					
					<p:outputPanel rendered="#{bulletinHome3.instance.wayOfChoose.name() == 'Random' or bulletinHome3.instance.wayOfChoose.name() == 'Manual' or bulletinHome3.instance.wayOfChoose.name() == 'Price' or bulletinHome3.instance.wayOfChoose.name() == 'Average'}" styleClass="choose">
						<p:outputPanel rendered="#{not bulletinHome3.instance.alreadyApplyOver()}">
							<div id="textMachine" timeSpan="#{bulletinHome3.instance.timeSPan}" class="choose_list filledChooseList" style="text-align: center; display: none; overflow: hidden;">			
								<p:repeat  var="_trade" value="#{bulletinHome3.instance.verifiedTrades}" varStatus="_status">
									<div class="chooseOption" supplierId="#{_trade.supplier.id}" active="#{_status.index}">
										<h:outputText value="#{_trade.supplier.cnname}" />
									</div>
								</p:repeat>
							</div>
							<div  timeSpan="#{bulletinHome3.instance.timeSPan}" class="choose_list emptyChooseList" style="text-align: center; display: inline-block; overflow: hidden;">								
									<div class="chooseOption" ></div>
							</div>
						</p:outputPanel>
						<p:outputPanel rendered="#{bulletinHome3.instance.alreadyApplyOver()}">
							<div class="choose_list chooseOption" style="text-align: center; display: inline-block; overflow: hidden;">
								<div><h:outputText value="#{bulletinHome3.instance.successTrade.supplier.cnname}" /></div>
							</div>
						</p:outputPanel>
						
					</p:outputPanel>
		
					<p:outputPanel rendered="#{bulletinHome3.instance.wayOfChoose.name() == 'Best'}" styleClass="choose">
						<p:outputPanel rendered="#{not bulletinHome3.instance.alreadyApplyOver()}">
							<div id="textMachine1" timeSpan="#{bulletinHome3.instance.timeSPan}" class="choose_list filledChooseList" style="text-align: center; display: none; overflow: hidden;">		
								<p:repeat var="_trade" value="#{bulletinHome3.instance.verifiedTrades}" varStatus="_status">
									<div class="chooseOption" supplierId="#{_trade.supplier.id}" active="#{_status.index}">
										<h:outputText value="#{_trade.supplier.cnname}" />
									</div>
								</p:repeat>
								<p:outputPanel rendered="#{bulletinHome3.instance.verifiedTrades.size() &lt; 1}">
									<div active="none">
										无人报名
									</div>
								</p:outputPanel>		
							</div>
							<div  timeSpan="#{bulletinHome3.instance.timeSPan}" class="choose_list emptyChooseList" style="text-align: center; display: inline-block; overflow: hidden;">								
									<div class="chooseOption" ></div>
							</div>
						</p:outputPanel>
						<p:outputPanel rendered="#{bulletinHome3.instance.alreadyApplyOver() &amp;&amp;bulletinHome3.instance.bestTrades.size() >= 1}">
							<div class="choose_list chooseOption" style="text-align: center; display: inline-block; overflow: hidden;">
								<div><h:outputText value="#{bulletinHome3.instance.bestTrades[0].supplier.cnname}" /></div>
							</div>
						</p:outputPanel>
						
						<p:outputPanel rendered="#{not bulletinHome3.instance.alreadyApplyOver() &amp;&amp; bulletinHome3.instance.candidateTradeCount >=2}">
							<div id="textMachine2" class="choose_list filledChooseList" style="text-align: center; display: none; overflow: hidden;">
								<c:if test="#{bulletinHome3.instance.verifiedTrades.size() &gt; 1}"	>	
									<p:repeat var="_trade" value="#{bulletinHome3.instance.verifiedTrades}"  varStatus="_status">
										<div class="chooseOption slotMachineSize" supplierId="#{_trade.supplier.id}" active="#{_status.index}" >
											<h:outputText value="#{_trade.supplier.cnname}" />
										</div>
									</p:repeat>
								
								</c:if>	
								<p:outputPanel rendered="#{bulletinHome3.instance.verifiedTrades.size() &lt; 2}">
									<div active="none" class="slotMachineSize">
										无人报名
									</div>	
								</p:outputPanel>
							</div>
						
							<div  timeSpan="#{bulletinHome3.instance.timeSPan}" class="choose_list emptyChooseList" style="text-align: center; display: inline-block; overflow: hidden;">								
									<div class="chooseOption" ></div>
							</div>
						
						</p:outputPanel>
						<p:outputPanel rendered="#{bulletinHome3.instance.alreadyApplyOver() &amp;&amp;bulletinHome3.instance.bestTrades.size() >= 2}">
							<div class="choose_list chooseOption" style="text-align: center; display: inline-block; overflow: hidden;">
								<div><h:outputText value="#{bulletinHome3.instance.bestTrades[1].supplier.cnname}" /></div>
							</div>
						</p:outputPanel>
						
						<p:outputPanel rendered="#{not bulletinHome3.instance.alreadyApplyOver() &amp;&amp; bulletinHome3.instance.candidateTradeCount >=3}">
							<div id="textMachine3"  class="choose_list filledChooseList" style="text-align: center; display: none; overflow: hidden;">		
								<c:if test="#{bulletinHome3.instance.verifiedTrades.size() &gt; 2}" >	
									<p:repeat var="_trade" value="#{bulletinHome3.instance.verifiedTrades}" varStatus="_status">
										<div class="chooseOption" supplierId="#{_trade.supplier.id}" active="#{_status.index}">
											<h:outputText value="#{_trade.supplier.cnname}" />
										</div>
									</p:repeat>
									
								</c:if>
								<p:outputPanel rendered="#{bulletinHome3.instance.verifiedTrades.size() &lt; 3}">
									<div active="none" class="slotMachineSize">
											无人报名 
									</div>
								</p:outputPanel>		
							</div>
					
							<div  timeSpan="#{bulletinHome3.instance.timeSPan}" class="choose_list emptyChooseList" style="text-align: center; display: inline-block; overflow: hidden;">								
									<div class="chooseOption" ></div>
							</div>
						
						</p:outputPanel>
						<p:outputPanel rendered="#{bulletinHome3.instance.alreadyApplyOver() &amp;&amp;bulletinHome3.instance.bestTrades.size() >= 3}">
							<div class="choose_list chooseOption" style="text-align: center; display: inline-block; overflow: hidden;">
								<div><h:outputText value="#{bulletinHome3.instance.bestTrades[2].supplier.cnname}" /></div>
							</div>
						</p:outputPanel>
						
						<!-- 第四个 -->
						<p:outputPanel rendered="#{not bulletinHome3.instance.alreadyApplyOver() &amp;&amp; bulletinHome3.instance.candidateTradeCount >=4}">
							<div id="textMachine4"  class="choose_list filledChooseList" style="text-align: center; display: none; overflow: hidden;">		
								<c:if test="#{bulletinHome3.instance.verifiedTrades.size() &gt; 3}" >	
									<p:repeat var="_trade" value="#{bulletinHome3.instance.verifiedTrades}" varStatus="_status">
										<div class="chooseOption" supplierId="#{_trade.supplier.id}" active="#{_status.index}">
											<h:outputText value="#{_trade.supplier.cnname}" />
										</div>
									</p:repeat>
									
								</c:if>
								<p:outputPanel rendered="#{bulletinHome3.instance.verifiedTrades.size() &lt; 4}">
									<div active="none" class="slotMachineSize">
											无人报名 
									</div>
								</p:outputPanel>		
							</div>
					
							<div  timeSpan="#{bulletinHome3.instance.timeSPan}" class="choose_list emptyChooseList" style="text-align: center; display: inline-block; overflow: hidden;">								
									<div class="chooseOption" ></div>
							</div>
						</p:outputPanel>
						<p:outputPanel rendered="#{bulletinHome3.instance.alreadyApplyOver() &amp;&amp;bulletinHome3.instance.bestTrades.size() >= 4}">
							<div class="choose_list chooseOption" style="text-align: center; display: inline-block; overflow: hidden;">
								<div><h:outputText value="#{bulletinHome3.instance.bestTrades[3].supplier.cnname}" /></div>
							</div>
						</p:outputPanel>
						<!-- 第五个 -->
						<p:outputPanel rendered="#{not bulletinHome3.instance.alreadyApplyOver() &amp;&amp; bulletinHome3.instance.candidateTradeCount >=5}">
							<div id="textMachine5"  class="choose_list filledChooseList" style="text-align: center; display: none; overflow: hidden;">		
								<c:if test="#{bulletinHome3.instance.verifiedTrades.size() &gt; 4}" >	
									<p:repeat var="_trade" value="#{bulletinHome3.instance.verifiedTrades}" varStatus="_status">
										<div class="chooseOption" supplierId="#{_trade.supplier.id}" active="#{_status.index}">
											<h:outputText value="#{_trade.supplier.cnname}" />
										</div>
									</p:repeat>
									
								</c:if>
								<p:outputPanel rendered="#{bulletinHome3.instance.verifiedTrades.size() &lt; 5}">
									<div active="none" class="slotMachineSize">
											无人报名 
									</div>
								</p:outputPanel>		
							</div>
					
							<div  timeSpan="#{bulletinHome3.instance.timeSPan}" class="choose_list emptyChooseList" style="text-align: center; display: inline-block; overflow: hidden;">								
									<div class="chooseOption" ></div>
							</div>
						</p:outputPanel>
						<p:outputPanel rendered="#{bulletinHome3.instance.alreadyApplyOver() &amp;&amp;bulletinHome3.instance.bestTrades.size() >= 5}">
							<div class="choose_list chooseOption" style="text-align: center; display: inline-block; overflow: hidden;">
								<div><h:outputText value="#{bulletinHome3.instance.bestTrades[3].supplier.cnname}" /></div>
							</div>
						</p:outputPanel>
						<h:inputHidden value="#{bulletinHome3.id}" />
						
					</p:outputPanel>
						
					<div id="chooseCountdown" style="color: red; font-weight: bold; font-size: 24px; text-align: center; margin-top: 20px;">
					
					</div>
					
						<div class="choose_button" >
							<h:form>
								<p:hotkey bind="ctrl+k" action="#{bulletinEndClientEndPointService.sendTestMessage(bulletinHome3.id)}"/>
								<p:hotkey bind="ctrl+q" action="#{bulletinRepairBean.triggerTimer(bulletinHome3.id)}"/>
							</h:form>
						</div>
					
						
					
				</div>
				<!-- 报价部分rendered="#{bulletinHome3.canOfferPrice()}" -->
				
				<h:form rendered="#{bulletinHome3.canOfferPrice()}"  prependId="false" id="offerPriceForm">
					当前报价（元）：<h:outputText id="newestPrice" /><br/>
					<h:inputHidden value="#{param.tradeId}" id="tradeId"  />
					<h:inputHidden value="#{bulletinHome3.instance.industryStandard}" id="industyStandard"  />
					<p:inputNumber minValue="0" decimalPlaces="2" id="price" widgetVar="price"></p:inputNumber>
					<p:button href="#" value="报价" id="offerPriceBtn" onclick="offerPrice()"></p:button>
					<script>
					<!--报价相关-->
					// <![CDATA[
						$(function(){
							getNewestPrice();
						})
						
						function getNewestPrice(){
							var tradeId = $( '#tradeId').val();
							var url = "#{request.getContextPath()}/rest/trade/getNewestPrice?tradeId="+tradeId ;
							$.ajax({
								type:'get',
								url:url,
								async:false,
								success:function(data){
									if(data.status == 200){
										var price = data.price;
										if(price == null)$("#newestPrice").text("暂未报价");
										else $("#newestPrice").text(price);
									}else{
										alert(data.errMsg);
									}
								}
							});
						}
						function offerPrice(){
							var price = new BigNumber( $('#price').find("input[type ='hidden']").val() );
							var industyStandard = new BigNumber( $('#industyStandard').val() );
							
							var tradeId = $( '#tradeId').val();
							if( price == null ) {
								alert("请输入报价！");
								return ;
							} else {
								if( price.greaterThan( industyStandard ) ){
									Showbo.Msg.alert("报价不能超过最高限价！");
									$('#price').find("input").val('');
									return ;
								}
							}
							var url = "#{request.getContextPath()}/rest/trade/offerPrice?tradeId="+tradeId +"&price="+price;
							$.ajax({
								type:'post',
								url:url,
								async:false,
								success:function(data){
									if(data.status == 200){
										alert("报价成功！");
										updatePagePrice(price);
										
									}else alert(data.errMsg);
								}
							});
						}
						function updatePagePrice(price){
							$("#newestPrice").text(price);
							$('#price').find("input").val('');
						}
						// ]]>
					</script>
				</h:form>
				<h:form  rendered="#{userService.getLoginedUser().id == bulletinHome3.instance.buyer.id }">
						<p:commandButton value="停止" id="stopBtn" widgetVar="stopBtn" styleClass="stopBtn" onclick="execEnd([{name:'bulletinId', value:'#{bulletinHome3.id}'}])" style="display:none;float:right"  type="button" >
						</p:commandButton>
					<ui:remove>
						<p:commandButton style="display:none;float:right"  class="startBtn"  
							 value="开始选取"   onclick="execStrat([{name:'bulletinId', value:'#{bulletinHome3.id}'}])" type="button" >
						</p:commandButton>	
					</ui:remove>		 
						<p:remoteCommand  name="execStrat" actionListener="#{bulletinChooseContoller.startChooseBulletin()}" />	 
						<p:remoteCommand  name="execEnd" actionListener="#{bulletinChooseContoller.endChooseBulletin()}" />	 
				</h:form>
			</div>
			<!--右-->
			<div class="bidding_right">
				<h2>报名公司（#{bulletinHome3.instance.verifiedTrades.size()}家）</h2>
				<ul>
					<p:repeat var="_trade" value="#{bulletinHome3.instance.verifiedTrades}">
						<li>
							<h:outputText value="#{_trade.supplier.cnname}" />
						</li>
					</p:repeat>
				</ul>
			</div>
			
		</div>
		<p:inputText value="#{currentDatetime}" styleClass="currSysTime" id="currSysTime" style="display:none"></p:inputText>
		
	</ui:define>

</ui:composition>
